<!--
 * @Description: element组件禁用日期及时间
 * @author: 
 * @since:2024-07-24
 * @page: date.vue
-->
<template>
  <div class="date-box">
    <p class="txt">禁用当前日期之前的时间（包含时分秒），及禁用某个限用日期之后的日期</p>
    <el-date-picker
      v-model="state.value"
      type="datetime"
      :default-time="new Date()"
      :disabled-date="disabledDateFn"
      :disabled-hours="disabledHours"
      :disabled-minutes="disabledMinutes"
      :disabled-seconds="disabledSeconds"
      value-format="YYYY-MM-DD HH:mm:ss"
      placeholder="请选择"
      class="date-picker"
    />
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import dayjs from 'dayjs'
const state = reactive({
  value: '',
  lastDate: new Date(), //当前日期是指定日期
})

// 限制日期当前日期之前的不能选，2025-02-15不能选
const disabledDateFn = (date) => {
  // return date.getTime() < Date.now() - 24 * 60 * 60 * 1000
  // 或者
  const now = new Date()
  const nowTime = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0)
  return date.getTime() < nowTime.getTime() || date.getTime() > new Date('2025-02-15').getTime()
}
// 限制小于当前时分秒的时间不能选
const commonFn = () => {
  //选中的年月日
  const value = dayjs(state.value).format('YYYY-MM-DD')
  // 指定日期的年月日
  const lastDate = dayjs(state.lastDate).format('YYYY-MM-DD')
  // 选中日期不等于指定日期，不禁用时间
  if (value !== lastDate) return
}
// 限制小时
const disabledHours = () => {
  const a = []
  commonFn()
  for (let i = 0; i < 24; i++) {
    if (new Date(state.lastDate).getHours() > i) {
      a.push(i)
    }
  }
  return a
}

// 限制分钟
const disabledMinutes = () => {
  const a = []
  commonFn()

  for (let i = 0; i < 60; i++) {
    if (new Date(state.lastDate).getMinutes() > i) {
      a.push(i)
    }
  }
  return a
}

// 限制秒
const disabledSeconds = () => {
  const a = []
  commonFn()
  for (let i = 0; i < 60; i++) {
    if (new Date(state.lastDate).getSeconds() > i) {
      a.push(i)
    }
  }
  return a
}
</script>
<style lang="scss" scoped>
.date-box {
  margin: 20px;
  .txt {
    margin-bottom: 20px;
  }
}
</style>
